<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>拖拽排序</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>

    <style>
        #selectableBox1 .ui-selecting {
            background-color: #f8b34c;
            color: #ffffff;
        }

        #selectableBox1 .ui-selected {
            background-color: #ff9b07;
            color: #ffffff;
        }

        #selectableBox2 .ui-selecting {
            background-color: #53ceb6;
            color: #ffffff;
        }

        #selectableBox2 .ui-selected {
            background-color: #1dc5a3;
            color: #ffffff;
        }

        .select-ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .select-ul li {
            float: left;
            border: 1px solid #ddd;
            width: 80px;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 10px 10px 0;
            user-select: none;
        }

        #selectableBox3 .ui-selecting {
            background-color: #f5f5f5;
        }
    </style>
</head>

<body class="bg-gray">
    <div class="wrapper wrapper-container">
        <div class="row">
            <div class="col-xs-6">
                <div class="panel">
                    <div class="panel-heading">
                        拖拽选择
                    </div>
                    <div class="panel-body" style="height: 300px;overflow-y:auto;">
                        <div id="selectableBox1">
                            <div class="card bg-white border-gray padding-10 no-selected">
                                拖拽选项卡片1
                            </div>
                            <div class="card bg-white border-gray padding-10 no-selected">
                                拖拽选项卡片2
                            </div>
                            <div class="card bg-white border-gray padding-10 no-selected">
                                拖拽选项卡片3
                            </div>
                            <div class="card bg-white border-gray padding-10 no-selected">
                                拖拽选项卡片4
                            </div>
                            <div class="card bg-white border-gray padding-10 no-selected">
                                拖拽选项卡片5
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="panel">
                    <div class="panel-heading">
                        网格拖拽选择
                    </div>
                    <div class="panel-body" style="height: 300px;overflow-y:auto;">
                        <p>您当前选择了：<span id="selectbox2_selected"></span></p>
                        <ul id="selectableBox2" class="select-ul">
                            <li>网格1</li>
                            <li>网格2</li>
                            <li>网格3</li>
                            <li>网格4</li>
                            <li>网格5</li>
                            <li>网格6</li>
                            <li>网格7</li>
                            <li>网格8</li>
                            <li>网格9</li>
                            <li>网格10</li>
                            <li>网格11</li>
                            <li>网格12</li>
                            <li>网格13</li>
                            <li>网格14</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="panel">
                    <div class="panel-heading">
                        CheckBox选择示例
                    </div>
                    <div class="panel-body" style="height: 300px;overflow-y:auto;">
                        <div id="selectableBox3">
                            <div class="card border-gray padding-10 no-selected">
                                <div class="checkbox-inline">
                                    <label>
                                        <input type="checkbox" value="">选项一
                                    </label>
                                </div>
                            </div>
                            <div class="card border-gray padding-10 no-selected">
                                <div class="checkbox-inline">
                                    <label>
                                        <input type="checkbox" value="">选项二
                                    </label>
                                </div>
                            </div>
                            <div class="card border-gray padding-10 no-selected">
                                <div class="checkbox-inline">
                                    <label>
                                        <input type="checkbox" value="">选项三
                                    </label>
                                </div>
                            </div>
                            <div class="card border-gray padding-10 no-selected">
                                <div class="checkbox-inline">
                                    <label>
                                        <input type="checkbox" value="">选项四
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
    <script type="text/javascript">
        $(function () {

            $("#selectableBox1").selectable();
            $("#selectableBox2").selectable({
                stop: function () {
                    var selectbox2_selected = $("#selectbox2_selected");
                    selectbox2_selected.empty();
                    $(".ui-selected", this).each(function () {
                        selectbox2_selected.append($(this).text() + "  ");
                    });
                }
            });
            $("#selectableBox3").selectable({
                stop: function () {
                    $(this).each(function () {
                        $(this).find('input[type="checkbox"]').prop("checked", false);
                    });
                    $(".ui-selected", this).each(function () {
                        $(this).find('input[type="checkbox"]').prop("checked", true);
                    });
                }
            });
        });
    </script>
</body>

</html>